<template>
  <div class="hello">
    <Button @click="save()">保存</Button>
    <Button @click="dele()">删除</Button>
    <Button @click="page()">分页</Button>
    <Button @click="menu()">菜单</Button>
  </div>
</template>

<script>
  import axios from 'axios'
  import Qs from 'qs'

  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      save: function () {
        axios.post("/brands/save", {name: "name1", remark: "remark1"}).then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })
      },
      page: function () {
        axios.post("/brands/page", {name: "haha"}, {params: {page: 2, size: 10}}).then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })
        /*axios({url: "/brands/page", method: "post", params: {page: 2, size: 10}, data: {name: "haha"}}).then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })*/
      },
      menu: function () {
        axios.get("/menus").then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })
      },
      dele: function () {

        let params = {id: [1,2].toString()};
        console.log(params)
        axios.post("/brands/delete", null, {params: params}).then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })
      },
      dele2: function () {
//        let params = {id: [1, 2].toString()};
//        params = Qs.stringify(params)

        let params = new URLSearchParams();
        params.append("id", [1, 2]);

        console.log(params)
        axios.post("/brands/delete", params).then(response => {
          console.log(response);
        }).catch(response => {
          console.log(response);
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
